<script setup lang="ts">
import {userinfoget} from '@/api/appuser'
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import {ref} from "vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import { onLoad } from '@dcloudio/uni-app';
onLoad(()=>{
	getUser()
})
const info=ref()
const getUser=()=>{
	userinfoget({}).then(res2=>{
	  if(res2.code === 200 && res2.data){
		  info.value=res2.data;
	  }
	})
}
</script>

<template>
<view class="uni-container-info">
  <view class="info-content">
    <text class="info-title">手机号</text>
    <uni-icons  color="#967A54" class="info-icon"  type="phone" size="18"></uni-icons>
    <text class="info-content-data">{{info.phone}}</text>
  </view>
  <view class="info-content">
    <text class="info-title">性&nbsp;&nbsp;&nbsp;别</text>
    <uni-icons  color="#967A54" class="info-icon"  type="person" size="18"></uni-icons>
    <text  class="info-content-data" v-if="info.sex === '1'">男</text>
    <text  class="info-content-data" v-if="info.sex === '0'">女</text>
  </view>
  <view class="info-content">
    <text class="info-title">住&nbsp;&nbsp;&nbsp;址</text>
    <uni-icons  color="#967A54" class="info-icon"  type="location" size="18"></uni-icons>
    <text  class="info-content-data">{{info.address}}</text>
  </view>
</view>
</template>

<style scoped lang="scss">
.info-content-data{
  color: #675F54;
  width: 30%;
  text-align: right;
}
.info-icon{
  width: 10%;
}
.info-title{
  color: #566B4C;
  margin-right:  5px;
  width: 60%;
  font-weight: bolder;
}
.info-content{
  width: 93%;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: whitesmoke;
  padding: 10px;
  border-radius: 5px;
  border: none;
}
.uni-container-info{
  font-size: 12px;
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局可能有助于高度分配 */
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center;
  background-color: #C9B9AA;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>